<script setup>
import { ceil } from 'lodash';
import { toRefs } from 'vue'
const props = defineProps({
  // 当前页码
  currentPage1: {
    type: Number,
    default: 3
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    default: 1000
  },
  pageTotal: {
    type: Number,
    default: 5
  }
})
// defineEmits(['update:currentPage1'])
// const { currentPage1, pageSize, total, pageTotal } = toRefs(props)
const emit = defineEmits(['handleSizeChange', 'handleCurrentChange', 'update:currentPage1'],)
const handleSizeChange = (val) => {
  console.log(val);
  emit('handleSizeChange', val)
}
const handleCurrentChange = (val) => {

  console.log(val);
  emit('handleCurrentChange', val)
}
</script>

<template>
  <div>
    <div class="pagination">
      <el-pagination :current-page="currentPage1" next-text="下一页" prev-text='上一页' background :page-size="pageSize"
        layout="slot,total, prev, pager, next" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
        <span style="color:#606266">共{{ ceil(total / pageSize) }}页</span>
      </el-pagination>
    </div>
  </div>
</template>

<style lang="less" scoped>
.pagination {
  display: flex;
  justify-content: center;
}
</style>
